<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.device"
        class="filter-item"
        placeholder="通道号/设备id"
        style="width: 200px;"
        @keyup.enter.native="handleFilter"
      />
      <el-button class="filter-item" icon="el-icon-search" type="primary" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" icon="el-icon-refresh" type="primary" @click="handleNewPull">
        新增
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      class="channel-table"
      element-loading-text="Loading"
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" min-width="5%">
        <template slot-scope="scope">
          {{ (listQuery.page - 1) * 10 + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="left" label="序号" min-width="10%">
        <template slot-scope="scope">
          <span>{{ scope.row.camera_id }}</span>

        </template>
      </el-table-column>
      <el-table-column align="center" label="国标设备id" min-width="18%">
        <template slot-scope="scope">
          <span>{{ scope.row.channel_id }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="拉流地址" min-width="30%">
        <template slot-scope="scope">
          <span>{{ scope.row.mrl }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否录像" min-width="5%">
        <template slot-scope="scope">
          <div v-if="scope.row.record">
            <el-tag type="success">是</el-tag>
          </div>
          <div v-else>
            <el-tag type="danger">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作" min-width="32%">
        <template slot-scope="scope">
          <el-button class="el-icon-arrow-right" size="mini" type="primary" @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button class="el-icon-arrow-right" size="mini" type="success" @click="view(scope.row)">预览
          </el-button>
          <el-button class="el-icon-arrow-right" size="mini" type="danger" @click="handleRemove(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 30px;">
      <el-pagination
        :current-page.sync="listQuery.page"
        :page-size="listQuery.pagesize"
        :total="total"
        background
        layout="prev, pager, next"
        @current-change="current_change"
      />
    </div>

    <pull-device-edit
      :show.sync="editDialogShow"
      :camera.sync="editItem"
      :dialog-status="dialogStatus"
      @update:show="fetchData"
    />
    <preview-dialog :media-object.sync="viewItem" :show.sync="previewDialogShow" media-type="proxy" />
  </div>
</template>

<script>
import { list, getLastChannelId, remove } from '@/api/proxy'
import previewDialog from '@/views/proxy/previewDialog'
import PullDeviceEdit from '@/views/proxy/proxyDeviceEdit.vue'

const TAG = '[拉流设备]'

export default {
  name: 'PullDevices',
  components: {
    PullDeviceEdit,
    previewDialog
  },
  data() {
    return {
      listLoading: false,
      listQuery: [],
      list: [],
      total: 0,
      // 是修改udpate, 还是新增create
      dialogStatus: '',
      previewDialogShow: false,
      editDialogShow: false,
      viewItem: { },
      editItem: { }
    }
  },
  created() {
    // 从 deviceCache.cameras 里加载数据
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true

      list(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        })
      }).finally(() => {
        this.listLoading = false
      })
    },
    current_change: function(page) {
      this.listQuery.page = page
      this.fetchData()
    },
    handleFilter() {
      this.listQuery.page = 1
      sessionStorage.removeItem('pullDevicePage')
      this.fetchData()
    },
    handleEdit(row) {
      this.editItem = row
      this.dialogStatus = 'update'
      this.editDialogShow = true
    },
    view(item) {
      console.info(TAG, '查看项', item)
      this.viewItem = Object.assign({}, item)
      this.previewDialogShow = true
    },

    async handleNewPull() {
      // 获取最大的channelId
      const lastChannelId = await getLastChannelId()
      this.editItem = {
        camera_id: undefined,
        channel_id: lastChannelId.data,
        in_use: 1,
        record: 1,
        server_id: 1
      }
      this.dialogStatus = 'create'
      this.editDialogShow = true
    },
    handleRemove(row) {
      this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove({ camera_id: row.camera_id }).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.fetchData()
        }).catch(error => {
          this.$message({
            message: error,
            type: 'error'
          })
        })
      }).catch(() => {

      })
    }
  }
}
</script>

<style>
.cell-icon {
  cursor: pointer;
  color: #fff;
}
</style>
